<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-form [formGroup]="formGroup" class="formGroup">
    <!-- 集群类型 -->
    <lv-form-item>
        <lv-form-label lvRequired>{{'protection_k8s_cluster_type_label' | i18n}}</lv-form-label>
        <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
            <lv-select formControlName="clusterType" [lvOptions]="clusterOptions" lvValueKey="value"
                lvShowCheckAll></lv-select>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label>{{'protection_auth_method_label' | i18n}}</lv-form-label>
        <lv-form-control>
            <lv-radio-group formControlName="type">
                <lv-group [lvGutter]="'24px'">
                    <lv-radio [lvValue]="dataMap.Cluster_Register_Mode.token.value">
                        {{ dataMap.Cluster_Register_Mode.token.label | i18n }}
                    </lv-radio>
                    <lv-radio [lvValue]="dataMap.Cluster_Register_Mode.kubeconfig.value">
                        {{ dataMap.Cluster_Register_Mode.kubeconfig.label | i18n }}
                    </lv-radio>
                </lv-group>
            </lv-radio-group>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>{{ 'common_name_label' | i18n}}</lv-form-label>
        <lv-form-control [lvErrorTip]="baseUtilService.nameErrorTip">
            <input lv-input type="text" formControlName="name" />
        </lv-form-control>
    </lv-form-item>
    <ng-container *ngIf="formGroup.value.type === dataMap.Cluster_Register_Mode.token.value">
        <lv-form-item>
            <lv-form-label lvRequired>
                {{ 'common_ip_address_label' | i18n}}
                <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_kubernetes_ip_tip_label' | i18n}}"
                    lvColorState='true' class="configform-constraint"></i>
            </lv-form-label>
            <lv-form-control [lvErrorTip]="baseUtilService.ipErrorTip">
                <input lv-input type="text" formControlName="ip" />
            </lv-form-control>
        </lv-form-item>
        <lv-form-item>
            <lv-form-label lvRequired>
                {{ 'common_port_label' | i18n }}
                <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_kubernetes_ip_port_label' | i18n}}"
                    lvColorState='true' class="configform-constraint"></i>
            </lv-form-label>
            <lv-form-control [lvErrorTip]="portErrorTip">
                <input lv-input lv-input type="text" formControlName="port" placeholder="1~65535" />
            </lv-form-control>
        </lv-form-item>
        <lv-form-item>
            <lv-form-label lvRequired>
                {{ 'protection_token_information_label' | i18n }}
                <i lv-icon="aui-icon-help" [lv-tooltip]="tokenHelpTpl" lvTooltipTheme="light"
                    class="configform-constraint" lvColorState='true' (mouseenter)="tokenHelpHover()"></i>
            </lv-form-label>
            <lv-form-control [lvErrorTip]="tokenErrorTip">
                <aui-inupt-with-eye formControlName="token"></aui-inupt-with-eye>
            </lv-form-control>
        </lv-form-item>
    </ng-container>
    <!-- 配置文件 -->
    <lv-form-item *ngIf="formGroup.value.type === dataMap.Cluster_Register_Mode.kubeconfig.value">
        <lv-form-label lvRequired>
            {{'protection_kubeconfig_file_label' | i18n}}
            <i lv-icon="aui-icon-help" [lv-tooltip]="kubeconfigTpl" lvTooltipTheme="light" class="configform-constraint"
                lvColorState='true' (mouseenter)="configHelpHover()"></i>
        </lv-form-label>
        <lv-form-control>
            <lv-upload lvShowUpload="false" [lvFilters]='configFileFilter' [(lvFiles)]="configFiles"
                (lvFilesChange)="configFileChange($event)">
            </lv-upload>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{ 'protection_kubernetes_pod_tag_label' | i18n }}
            <i lv-icon="aui-icon-help" [lv-tooltip]="tagHelpTpl" lvTooltipTheme="light" class="configform-constraint"
                lvColorState='true' (mouseenter)="tagHelpHover()"></i>
        </lv-form-label>
        <lv-form-control [lvErrorTip]="podTagErrorTip">
            <input lv-input lv-input type="text" formControlName="podTag" placeholder="image:v1" />
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{ 'protection_kubernetes_node_task_label' | i18n }}
            <i lv-icon="aui-icon-help" lv-tooltip="{{'protection_node_task_help_label' | i18n}}" lvTooltipTheme="light"
                class="configform-constraint" lvColorState='true'></i>
        </lv-form-label>
        <lv-form-control [lvErrorTip]="taskNumberErrorTip">
            <input lv-input lv-input type="text" formControlName="taskNumber" placeholder="{{isEn?'1-8':'1~8'}}" />
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label lvRequired>
            {{'common_task_timeout_label' | i18n}}
        </lv-form-label>
        <lv-form-control>
            <lv-group lvGutter='8px'>
                <lv-spinner [ngClass]="{'timeout-spinner': _isEn}"
                    lvMin="{{+formGroup.value.timeoutHour === 0 && +formGroup.value.timeoutMin === 0 && +formGroup.value.timeoutSec === 0  ? 1 : 0}}"
                    formControlName="timeoutDay">
                </lv-spinner>
                <span>{{'common_days_label' | i18n}}</span>
                <lv-spinner [ngClass]="{'timeout-spinner': _isEn}" lvMax="23"
                    lvMin="{{+formGroup.value.timeoutDay === 0 && +formGroup.value.timeoutMin === 0 && +formGroup.value.timeoutSec === 0  ? 1 : 0}}"
                    formControlName="timeoutHour">
                </lv-spinner>
                <span>{{'common_hours_label' | i18n}}</span>
                <lv-spinner [ngClass]="{'timeout-spinner': _isEn}" lvMax="59"
                    lvMin="{{+formGroup.value.timeoutDay === 0 && +formGroup.value.timeoutHour === 0 && +formGroup.value.timeoutSec === 0  ? 1 : 0}}"
                    formControlName="timeoutMin">
                </lv-spinner>
                <span>{{'common_minutes_label' | i18n}}</span>
                <lv-spinner [ngClass]="{'timeout-spinner': _isEn}" lvMax="59"
                    lvMin="{{+formGroup.value.timeoutDay === 0 && +formGroup.value.timeoutHour === 0 && +formGroup.value.timeoutMin === 0  ? 1 : 0}}"
                    formControlName="timeoutSec">
                </lv-spinner>
                <span>{{'common_seconds_label' | i18n}}</span>
            </lv-group>
        </lv-form-control>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label>
            {{ 'common_verify_cert_label' | i18n }}
        </lv-form-label>
        <lv-form-control>
            <lv-switch formControlName="cert"></lv-switch>
            <div *ngIf="formGroup.value.cert && formGroup.value.type === dataMap.Cluster_Register_Mode.token.value">
                <lv-form-item>
                    <lv-form-label lvRequired>
                        {{ 'protection_fc_cert_label' | i18n }}
                    </lv-form-label>
                    <lv-form-control [lvErrorTip]="baseUtilService.requiredErrorTip">
                        <aui-inupt-with-eye formControlName="certData"></aui-inupt-with-eye>
                    </lv-form-control>
                </lv-form-item>
            </div>
            <div *ngIf="!formGroup.value.cert">
                <i lv-icon="lv-icon-status-warning-info"></i>
                <span class="aui-text-label">
                    {{ 'protetion_register_kubernetes_cert_label' | i18n }}
                </span>
            </div>
        </lv-form-control>
    </lv-form-item>
    <!-- 节点选择器 -->
    <lv-form-item>
        <lv-form-label>
            <h3>{{'protection_node_selector_label' |i18n}}</h3>
        </lv-form-label>
    </lv-form-item>
    <lv-form-item>
        <lv-form-label>
            {{'protection_labels_label' | i18n}}
        </lv-form-label>
        <lv-form-control>
            <ng-container *ngFor="let item of includeLabels; last as isLast">
                <lv-group lvGutter='8px' [ngClass]="{'mgb': !isLast, 'mgb-min': isLast}" class="label-group"
                    [lvColumns]='["auto", "auto", "20px"]'>
                    <lv-form-control [lvErrorTip]='keyErrorTip'>
                        <input lv-input [formControlName]="prefixInKey + item.id"
                            placeholder="{{'common_enter_key_label' | i18n}}" />
                    </lv-form-control>
                    <lv-form-control [lvErrorTip]='valueErrorTip'>
                        <input lv-input [formControlName]="prefixInValue + item.id"
                            placeholder="{{'common_enter_value_label' | i18n}}" />
                    </lv-form-control>
                    <i lv-icon="aui-icon-remove" (click)="deleteIncludeLabels(item.id)" lvColorState='true'></i>
                </lv-group>
            </ng-container>
            <lv-group lvGutter='8px' class="add-group aui-link" (click)="addIncludeLabels()">
                <i lv-icon="aui-icon-add-enable"></i>
                <span class="text-middle">{{'common_add_label' | i18n}}</span>
            </lv-group>
        </lv-form-control>
    </lv-form-item>
</lv-form>

<ng-template #kubeconfigTpl>
    <span [innerHtml]="kubeconfigHelp"></span>
</ng-template>

<ng-template #tagHelpTpl>
    <span [innerHtml]="tagHelp"></span>
</ng-template>

<ng-template #tokenHelpTpl>
    <span [innerHtml]="tokenHelp"></span>
</ng-template>